<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://www.codecoord.com" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/live_meeting.css">
    <script src="${pageContext.request.contextPath}/static/jquery/jquerymin.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/dist/css/layui.css">
    <script src="${pageContext.request.contextPath}/static/layui/dist/layui.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap-min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/Time.css">
    <script src="${pageContext.request.contextPath}/static/js/axios-min.js"></script>
    <title>日程表</title>
    <style>
        #navbar-default {
            background-color: #71BD71;
        }
        .aui-footer-fixed{
            display: none;
        }
    </style>
</head>
<body>
<div id="header">
    <nav id="navbar-default" class="navbar navbar-default top-nabar" role="navigation"
         style="overflow:hidden;position:fixed;top:0;width:100%;z-index:1002;border: 0">
        <div class="row">
            <div class="container-fluid" id="fluid">
                <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1" style=";padding-left: 6px;">
                    <a class="navbar-brand" href="javascript:history.back(-1)"
                       style="padding-left: 3px;">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    </a>
                </div>
            </div>
        </div>
    </nav>
    <br><br>
</div>
<div>
    <div class="plan-finish-header" style="overflow: hidden">
        <div class="plan-finish-bg" ></div>
        <img src="/bokeupload${loginUser.photo}" alt="" width="60px" height="60px" onerror="this.src='${pageContext.request.contextPath}/resource/images/richenbiao.png'" style="position: absolute; top: 30px;left: 5%; border-radius:50%;z-index: 100;opacity:0.8;">
        <p id="top_p1">${loginUser.name}</p>
        <p id="top_p2">${loginUser.companyId}</p>
        <p id="top_p3">${loginUser.officeId}</p>
    </div>
</div>
<div id="coursesTable">
    <div id="courseWrapper"
         style="position: relative; padding-left: 40px; border: 1px solid #E3E3E3;border-radius: 3px">
        <div class="Courses-head" style="overflow: hidden;height: 40px">
            <div class="Courses-head-0"
                 style="float: left; box-sizing: border-box; white-space: nowrap; width: 14.285%;height: 100%">
                <p class="p-weekend">周一</p>
                <p class="Courses-p-0 p-time"></p>
            </div>
            <div class="Courses-head-0"
                 style="float: left; box-sizing: border-box; white-space: nowrap; width: 14.285%;height: 100%">
                <p class="p-weekend">周二</p>
                <p class="Courses-p-1 p-time"></p>
            </div>
            <div class="Courses-head-0"
                 style="float: left; box-sizing: border-box; white-space: nowrap; width: 14.285%;height: 100%">
                <p class="p-weekend">周三</p>
                <p class="Courses-p-2 p-time"></p>
            </div>
            <div class="Courses-head-0"
                 style="float: left; box-sizing: border-box; white-space: nowrap; width: 14.285%;height: 100%">
                <p class="p-weekend">周四</p>
                <p class="Courses-p-3 p-time"></p>
            </div>
            <div class="Courses-head-0"
                 style="float: left; box-sizing: border-box; white-space: nowrap; width: 14.285%;height: 100%">
                <p class="p-weekend">周五</p>
                <p class="Courses-p-4 p-time"></p>
            </div>
            <div class="Courses-head-0"
                 style="float: left; box-sizing: border-box; white-space: nowrap; width: 14.285%;height: 100%">
                <p class="p-weekend">周六</p>
                <p class="Courses-p-5 p-time"></p>
            </div>
            <div class="Courses-head-0"
                 style="float: left; box-sizing: border-box; white-space: nowrap; width: 14.285%;height: 100%">
                <p class="p-weekend">周末</p>
                <p class="Courses-p-6 p-time"></p>
            </div>
        </div>
        <div class="Courses-content">
            <c:forEach items="${time}" var="time" varStatus="status">
                <ul id="allul" class="stage_${time}" style="list-style: none; padding: 0px; margin: 0px; height: 40px;">
                    <li class="li-0-${status.index}"
                        style="float: left; width: 14.285%; height: 40px; box-sizing: border-box; position: relative;"
                        value="${status.index}"></li>
                    <li class="li-1-${status.index}"
                        style="float: left; width: 14.285%; height: 40px; box-sizing: border-box; position: relative;"
                        value="${status.index}"></li>
                    <li class="li-2-${status.index}"
                        style="float: left; width: 14.285%; height: 40px; box-sizing: border-box; position: relative;"
                        value="${status.index}"></li>
                    <li class="li-3-${status.index}"
                        style="float: left; width: 14.285%; height: 40px; box-sizing: border-box; position: relative;"
                        value="${status.index}"></li>
                    <li class="li-4-${status.index}"
                        style="float: left; width: 14.285%; height: 40px; box-sizing: border-box; position: relative;"
                        value="${status.index}"></li>
                    <li class="li-5-${status.index}"
                        style="float: left; width: 14.285%; height: 40px; box-sizing: border-box; position: relative;"
                        value="${status.index}"></li>
                    <li class="li-6-${status.index}"
                        style="float: left; width: 14.285%; height: 40px; box-sizing: border-box; position: relative;"
                        value="${status.index}"></li>
                </ul>
            </c:forEach>
        </div>
        <%--下面元素暂时不使用for循环遍历生成--%>
        <div class="Courses-leftHand" style="position: absolute; left: 0; top: 0; width: 40px;">
            <div class="left-hand-TextDom"
                 style="height: 40px; box-sizing: border-box;padding-top: 0;position: relative">
                <span id="button_1" onclick="">
                    <i class="layui-icon layui-icon-delete"></i></span>
            </div>
            <div class="left-hand-1 left-hand">
                <p class="left-hand-name-0"></p>
            </div>
            <div class="left-hand-2 left-hand">
                <p class="left-hand-name-1"></p>
            </div>
            <div class="left-hand-3 left-hand">
                <p class="left-hand-name-2"></p>
            </div>
            <div class="left-hand-4 left-hand">
                <p class="left-hand-name-3"></p>
            </div>
            <div class="left-hand-7 left-hand">
                <p class="left-hand-name-4"></p>
            </div>
            <div class="left-hand-8 left-hand">
                <p class="left-hand-name-5"></p>
            </div>
            <div class="left-hand-9 left-hand">
                <p class="left-hand-name-6"></p>
            </div>
            <div class="left-hand-10 left-hand">
                <p class="left-hand-name-7"></p>
            </div>
            <div class="left-hand-11 left-hand">
                <p class="left-hand-name-8"></p>
            </div>
            <div class="left-hand-12 left-hand">
                <p class="left-hand-name-9"></p>
            </div>
        </div>
    </div>
</div>
<div id="last">
    <p>注:1.未设置时间段将默认空闲 2.每周日程将默认使用上周设置(可手动设置)</p>
    <button id="but-0">
        点击空格设置日程事件
    </button>
    <button id="but_1" onclick="pagess(-1)">
        <i class="layui-icon layui-icon-left"></i>
    </button>
    <button id="but_2" onclick="pagess(1)">
        <i class="layui-icon layui-icon-right"></i>
    </button>
</div>
<div style="height: 70px;width: 100%"></div>
<footer class="aui-footer aui-footer-fixed">

    <a href="/boke/index.jsp" class="aui-tabBar-item " style="text-decoration:none;">
        <span class="aui-tabBar-item-icon"><i class="icon icon-loan"></i></span>
        <span class="aui-tabBar-item-text">首页</span></a>

    <a href="/bokehall/hall/allHall" class="aui-tabBar-item aui-tabBar-item-active">
        <span class="aui-tabBar-item-icon"><i class="icon icon-credit"></i></span>
        <span class="aui-tabBar-item-text">会诊</span></a>

    <a href="/boke/msg/chatfriend.jsp" class="aui-tabBar-item ">
        <span class="aui-tabBar-item-icon"><i class="icon icon-ions"></i></span>
        <span class="aui-tabBar-item-text">消息</span></a>

    <a href="/boke/me.jsp" class="aui-tabBar-item "><span
            class="aui-tabBar-item-icon"><i class="icon icon-mine"></i></span>
        <span
                class="aui-tabBar-item-text">我的
        </span></a>
</footer>
<script>
    var courseList = [       //状态    定义状态集合
        {indexx: 0, title: "出诊"},
        {indexx: 1, title: "勿扰"},
        {indexx: 2, title: "有约"}
    ];
    var week = window.innerWidth > 360 ? ['周一', '周二', '周三', '周四', '周五'] : //周数
        ['一', '二', '三', '四', '五'];
    var day = new Date().getDay(); //获取当前时间所在的一周的时间列表
    var courseType = [              //时间列表集合
        {index: '1', time: '8:00-9:00'},
        {index: '2', time: '9:00-10:00'},
        {index: '3', time: '10:00-11:00'},
        {index: '4', time: '11:00-12:00'},
        {index: '5', time: '14:00-15:00'},
        {index: '6', time: '15:00-16:00'},
        {index: '7', time: '16:00-17:00'},
        {index: '8', time: '17:00-18:00'},
        {index: '9', time: '18:00-19:00'},
        {index: '10', time: '20:00-21:00'},
    ];

    function getNowFormatDate() { //获得当前完整日期
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }

    let array = new Array();   //所有timeconfig
    $(document).ready(function () {
        //获取地址栏
        $("#header").hide(); //隐藏导航栏
        var myurl = GetQueryString("index");
        var myDate = new Date();
        //遍历后台日程列表回显到页面对应日程位置
        switch (myurl) {
            case 'this':
            <c:forEach items="${allSchedule}" var="allSchedule">
                array.push({
                    timeconfig: '${allSchedule.timeconfig}',
                    scheduledate: '${allSchedule.scheduledate}'
                })
            </c:forEach>
                break;
            case 'down':
            <c:forEach items="${allSchedule}" var="allSchedule" varStatus="status">
                array.push({
                    timeconfig: '${allSchedule.timeconfig}',
                    scheduledate: '${allSchedule.scheduledate}'
                })
            </c:forEach>
                break;
        }

        let arr;
        /**/
        myDate.setDate(myDate.getDate() + 7);
        let nexttime = myDate.getFullYear() + "-" + (myDate.getMonth() + 1) + "-" + myDate.getDate(); //当前时间后七天
        /**/
        myDate.setDate(myDate.getDate() - 7);
        let nexttime2 = myDate.getFullYear() + "-" + (myDate.getMonth() + 1) + "-" + myDate.getDate(); //当前时间后七天
        if (myurl == 'this') {
            arr = getWeekDay(getNowFormatDate()) //获取当前时间所在周的5天日期
            $('#but_1').css("background-color", "#EAEAEA");
            $('#but_1').removeAttr('onclick');
        } else if (myurl == 'down') {
            arr = getWeekDay(nexttime)        //获取下一周所在周的5天日期
            $('#but_2').css("background-color", "#EAEAEA");
            $('#but_2').removeAttr('onclick');
            $('#but_1').css("background-color", "rgb(0, 162, 174)");
        } else if (myurl == 'up') {
            arr = getWeekDay(nexttime2)       //获取上一周所在周的5天日期
            $('#but_1').css("background-color", "#EAEAEA");
            $('#but_1').removeAttr('onclick');
            $('#but_2').css("background-color", "rgb(0, 162, 174)");
        }
        showAllSchedule();
        for (let i = 0; i <= 6; i++) {                   //遍历填充顶部日期
            $('.Courses-p-' + i).text(arr[i]);
        }
        for (let i = 0; i <= 10; i++) {          //遍历填充左侧时间
            $('.left-hand-name-' + i).text(courseType[i].time);
        }
    });


    $('.Courses-content li').click(function () {
        let dom = $(this);  //获得点击的li元素
        if(dom.text()=="有约"){
            layer.alert( '当前时段已有约,无法更改日程', {icon: 2});
            return false;
        }
        let time1 = $('.p-time').eq(dom.index()).text();  //time1为点击的li所在列的顶部日期  dom.index()点击的li所在ul中的索引
        //这里
        time1=getWeekDayOnlyYear(getNowFormatDate())[0]+time1;
        let test = new Array();
        test = time1.split("-");
        if (test[1].length < 2) {
            test[1] = "0" + test[1]
        }
        if (test[2].length < 2) {
            test[2] = "0" + test[2]
        }
        let time = test[0] + '-' + test[1] + '-' + test[2]
        layer.confirm('请进行您的当前时间段设置', {
            btn: ['出诊', '勿扰', '清除'],
            title: '请选择',
            btn1: function () {
                layer.closeAll('dialog');
                dom.css({'background-color': '#D1F5F5', "color": "#03C6BF"});
                dom.text(courseList[0].title);
                ChangeSchedule(dom.val(), time, '1');   //dom.val点击的li所在的行数, 1为出诊状态,  time为当前点击列的日期
            },
            btn2: function () {
                dom.css({'background-color': '#FEF0F0', "color": "#FF7F50"});
                dom.text(courseList[1].title);
                ChangeSchedule(dom.val(), time, '2');   //dom.val点击的li所在的行数, 1为出诊状态, time为当前点击列的时间
            },
            btn3: function () {
                dom.css({'background-color': 'transparent'});
                dom.text('');
                ChangeSchedule(dom.val(), time, '0');
            }
        });

    });

    function getWeekDay(dateString) {  //获取给出日期的所在周的七天日期
        let dateStringReg = /^\d{4}[/-]\d{1,2}[/-]\d{1,2}$/;

        if (dateString.match(dateStringReg)) {
            let presentDate = new Date(dateString),
                today = presentDate.getDay() !== 0 ? presentDate.getDay() : 7;

            return Array.from(new Array(7), function (val, index) {
                return formatDate(new Date(presentDate.getTime() - (today - index - 1) * 24 * 60 * 60 * 1000));
            });

        } else {
            throw new Error('时间格式错误');
        }

        function formatDate(date) {
            return (date.getMonth() + 1) + '-' + date.getDate();
        }
    }
    function getWeekDayOnlyYear(dateString) {  //获取给出日期的所在周的七天日期只含年份
        let dateStringReg = /^\d{4}[/-]\d{1,2}[/-]\d{1,2}$/;

        if (dateString.match(dateStringReg)) {
            let presentDate = new Date(dateString),
                today = presentDate.getDay() !== 0 ? presentDate.getDay() : 7;

            return Array.from(new Array(7), function (val, index) {
                return formatDate(new Date(presentDate.getTime() - (today - index - 1) * 24 * 60 * 60 * 1000));
            });

        } else {
            throw new Error('时间格式错误');
        }

        function formatDate(date) {
            return date.getFullYear() + '-';
        }
    }


    function ChangeSchedule(rowid, scheduledate, gridvalue) {  //提交日程修改
        let form = new FormData();
        form.append("scheduledate", scheduledate); //日期
        form.append("rowid", rowid);          //行号
        form.append("gridvalue", gridvalue);          //状态 0 1 2
        console.log(form.get("scheduledate"),form.get("rowid"),form.get("gridvalue"))
        axios({
            method: 'post',
            url: '${pageContext.request.contextPath}/schedule/set',
            data: form,
        })
            .then(function (r) {
                if(r=="false"){
                    alert("修改失败")
                }
            })
    }

    //翻页
    function pagess(index) {
        if (index > 0) {  //下翻
            window.location.replace("${pageContext.request.contextPath}/schedule/show?index=down")
        } else {     //上翻
            window.location.replace("${pageContext.request.contextPath}/schedule/show?index=this")
        }
    }

    //获取地址栏后面的参数
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    function showAllSchedule() {  //回显日程到页面
        for (let c = 0; c <${allSchedule.size()}; c++) {
            for (let b = 0; b <= 10; b++) {
                let newDom = $('.li-' + c + '-' + b); //初始化
                newDom = $('.li-' + c + '-' + b);     //每次循环重新赋值
                newDom.text(array[c].timeconfig[b]);
                switch (newDom.text()) {
                    case '1':
                        newDom.css({'background-color': '#D1F5F5', "color": "#03C6BF"});
                        newDom.text(courseList[0].title);
                        break;
                    case '2':
                        newDom.css({'background-color': '#FEF0F0', "color": "#FF7F50"});
                        newDom.text(courseList[1].title);
                        break;
                    case '0':
                        newDom.text('');
                        break;
                    case '3':
                        newDom.css({'background-color': '#A2A0A2', "color": "#646264"});
                        newDom.text(courseList[2].title);
                        break;
                }

            }
        }
    }

    $('.left-hand-TextDom').click(function () { //清空当前周日程
        layer.confirm('您确定要清空当前周的日程？(注:有预约的日期不会重置)', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            let weekendSchedule = new Array();
            let test3;
            for (let b = 0; b <= 7; b++) {
                if (b !== 7) {
                    test3 = ($(".p-time").eq(b).text()).split("-");
                    test3.unshift(getWeekDayOnlyYear(getNowFormatDate())[0].substr(0,4))
                }
                if (test3[1].length < 2) {
                    test3[1] = "0" + test3[1]
                }
                if (test3[2].length < 2) {
                    test3[2] = "0" + test3[2]
                }
                let time = test3[0] + '-' + test3[1] + '-' + test3[2]
                weekendSchedule.push(time);
            }
            weekendSchedule = weekendSchedule.slice(0, weekendSchedule.length - 1)//得到当前周所有日期
            let weekendScheduleform = new FormData();
            weekendScheduleform.append("weekendScheduleform", weekendSchedule.toString())
            axios({
                method: 'post',
                url: '${pageContext.request.contextPath}/schedule/delete',
                data: weekendScheduleform,
            })
                .then(function (r) {
                    if (r.data == "ok") {
                        location.reload();
                    } else {
                        alert("修改失败")
                    }
                })
        }, function () {

        });
    })

</script>
</body>
</html>
